<template>
	<div class="goodsinfo">
		<!-- 加购物车时的小球动画 -->
		<transition
			@before-enter="beforeEnter"
			@enter="enter"
			@after-enter="afterEnter">
			<div class="ball" v-show="ballFlag" ref="ball"></div>
		</transition>
		
		<div class="mui-card">
			<swipe :lunbolist="this.list" :isfull="false"></swipe>
		</div>
		
		<div class="mui-card">
			<div class="mui-card-header">{{ this.goods.title }}</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>
						原价：<del>￥{{ this.goods.old }}</del>&nbsp;&nbsp;
						现价：<span class="now-price">￥{{ this.goods.now }}</span>
					</p>
					<p>
						购买数量：<numbox :max="goods.surplus" @getSelectedCount="getSelectedCount"></numbox>
					</p>
					<p>
						<mt-button type="primary" size="small">立即购买</mt-button>
						<mt-button type="danger" size="small" @click="goToShopCar">加入购物车</mt-button>
					</p>
				</div>
			</div>
		</div>
		
		<div class="mui-card">
			<div class="mui-card-header">商品参数</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>商品货号：{{ new Date().getTime() }}</p>
					<p>库存情况：{{ this.goods.surplus }}</p>
					<p>上架时间：{{ new Date().getTime() | dateFormat }}</p>
				</div>
			</div>
			<div class="mui-card-footer">
				<mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
				<mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
			</div>
		</div>
	</div>
</template>

<script>
	import swipe from '../subcomponents/Swipe.vue'
	import numbox from '../subcomponents/goodsinfo_numberbox.vue'
	export default {
		data(){
			return {
				id:this.$route.params.id,
				list:[],
				goods:{},
				ballFlag:false,
				selectedCount:1
			}
		},
		created() {
			this.getGoodsInfo();
		},
		methods:{
			getGoodsInfo(){
				this.$http.get('../../data/goodslist.json').then(result => {
					var body = result.body;
					if(body.length>0){
						var arr = body.filter(item => {
							return item.type == this.id;
						})
						this.list = arr;
						this.goods = arr[0];
					}
				},err => {
					
				})
			},
			goDesc(id){
				this.$router.push({name:'desc',params:{id}})
			},
			goComment(id){
				this.$router.push({name:'comment',params:{id}})
			},
			goToShopCar(){
				this.ballFlag = !this.ballFlag;
				var info = {
					id:this.id,
					title:this.goods.title,
					count:this.selectedCount,
					price:this.goods.now,
					max:this.goods.surplus,
					url:this.goods.url,
					selected:true
				}
				this.$store.commit("addToCar",info)
			},
			beforeEnter(el){
				el.style.transform = "translate(0,0)";
			},
			enter(el,done){
				el.offsetWidth;
				/* 
				 小球动画存在的一个问题：由于我们给定的小球的移动距离时固定的，当我们在纵向上
				 滚动了屏幕或者屏幕的分辨率发生了改变后，小球移动到的终点将不在是我们想要的位置
				 思路：我们需要动态的获取小球移动的纵向和横向上的距离。即徽标的当前位置减去小球的当前位置
				 方案：使用js中的DOMObject.getBoundingClientRect()
				 */
				const ball = this.$refs.ball.getBoundingClientRect();
				const badge = document.getElementById("badge").getBoundingClientRect();
				const y = badge.top - ball.top;
				const x = badge.left - ball.left;
				/* 
				反引号的使用（``）：将输入法切换为英文输入法，按大键盘上的 数字 1 的左边的键即可 
				 */
				el.style.transform = `translate(${x}px,${y}px)`;
				el.style.transition = "all 1s cubic-bezier(.4,-0.3,1,.68)";
				done();
			},
			afterEnter(el){
				this.ballFlag = !this.ballFlag;
			},
			getSelectedCount(count){
				/* 
				 父组件向子组件传递一个方法，子组件调用，子组件向父组件传值
				 */
				this.selectedCount = count;
			}
		},
		components:{
			swipe,
			numbox
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.goodsinfo{
		background-color: #eee;
		overflow: hidden;  /* 新建一个 BFC 解决外边距重叠的问题 */
		.now-price{
			color: red;
			font-size: 16px;
			font-weight: blod;
		}
		.mui-card-footer{
			display: block;
			button{
				margin: 15px 0px;
			}
		}
		.ball{
			position: absolute;
			left: 150px;
			top: 400px;
			z-index: 99;
			width: 16px;
			height: 16px;
			background-color: red;
			border-radius: 8px;
		}
	}
</style>
